<template>
  <div class="root">
    <Icon
      @click="deleteHandle"
      v-if="deleteHandle"
      size="20"
      class="action"
      type="md-trash"
    />
    <Divider v-if="deleteHandle" type="vertical"></Divider>
    <a>
      <Icon size="20" class="action" type="md-download" />
    </a>
    <Divider type="vertical"></Divider>
    <Tooltip max-width="200" class="text" :content="name">
      <p class="text">{{ name }}</p>
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: "FilePreviewer",
  props: {
    name: {
      type: String,
      default: "文件文件文件文件文件文件文件文件全名.txt",
    },
    sourceUrl: {
      type: String,
      default: "",
    },
    deleteHandle: {
      type: Function,
      default: null,
    },
  },
};
</script>

<style scoped lang="less">
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.root {
  width: 230px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 0px 8px
  //flex: 1;
}
.action {
  flex: 1;
}
.text {
  width: 100%;
  display: flex;
  overflow:hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
  min-width: 0;
}
</style>